<template>
  <!-- vue3页面 -->
  <div style="padding: 5px; width: 100%">
    <a-card style="border-radius: 10px" :bodyStyle="{ padding: '5px 15px' }">
      <a-descriptions
        bordered
        style="margin-top: 20px"
        :labelStyle="{ width: '200px', textAlign: 'center' }"
        :contentStyle="{ textAlign: 'center' }"
      >
        <template #extra>
          <a-button
            type="primary"
            style="margin-right: 20px"
            @click="listVisible = true"
            >专项经费列表</a-button
          >
          <a-button type="primary" @click="recordVisible = true"
            >查询工会委员会的使用记录</a-button
          >
        </template>
        <a-descriptions-item label="工会名称" :span="3"
          ><span style="font-weight: bold; font-size: 16px; color: #000000d9"
            >工会委员会</span
          ></a-descriptions-item
        >
        <a-descriptions-item label="工会通用预算" :span="1">
          <a-tag color="orange">15万</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="通用已使用预算" :span="1">
          <a-tag color="green">10万</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="通用剩余预算" :span="1">
          <a-tag color="blue">5万</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="工会专项预算" :span="1">
          <a-tag color="orange">5000</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="专项已使用预算" :span="1">
          <a-tag color="green">4000</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="专项剩余预算" :span="1">
          <a-tag color="blue">1000</a-tag>
        </a-descriptions-item>
      </a-descriptions>
      <MyAssociationExpenditure />
      <MyUnionExpenditure />
    </a-card>
  </div>
  <a-drawer
    v-model:visible="recordVisible"
    title="工会委员会预算使用记录"
    placement="right"
    :bodyStyle="{ padding: 0 }"
    width="85%"
  >
    <MyRecordTable></MyRecordTable>
  </a-drawer>
  <a-drawer
    v-model:visible="listVisible"
    title="专项经费列表"
    placement="right"
    :bodyStyle="{ padding: 0 }"
    width="85%"
  >
    <MyBudgetAprove></MyBudgetAprove>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import MyUnionExpenditure from "./components/remainder/unionExpenditure.vue";
import MyAssociationExpenditure from "./components/remainder/associationExpenditure.vue";
import MyRecordTable from "../expense/expenseRecord.vue";
import MyBudgetAprove from "./budgetAprove.vue";
// import MyAppropriation from './components/remainder/appropriation.vue';
// import MyCurrentUnion from "./components/remainder/currentUnion.vue";
// import MyCurrentAssociation from "./components/remainder/currentAssociation.vue";
const listVisible = ref(false);
const recordVisible = ref(false);
onMounted(() => {
  console.log("mounted");

  // 写一个fetch请求
});
// const activeKey = ref("1");
</script>

<style scoped></style>
